<template>
    <vxe-form ref="firstForm" title-width="220" title-align="right" :data="{}" :rules="{}" span="12">
      <vxe-form-item title="文本框">
        <el-input v-model="input" placeholder="请输入" clearable></el-input>
      </vxe-form-item>
      <vxe-form-item title="值">{{input}}</vxe-form-item>

      <vxe-form-item title="日期选择器（范围选择）">
        <rayd-date-picker type="datetimerange" v-model="datetimerange"></rayd-date-picker>
      </vxe-form-item>
      <vxe-form-item title="值">{{datetimerange}}</vxe-form-item>

      <vxe-form-item title="日期选择器（精确选择）" >
        <rayd-date-picker type="date" v-model="date"></rayd-date-picker>
      </vxe-form-item>
      <vxe-form-item title="值">{{date}}</vxe-form-item>

      <vxe-form-item title="单选下拉选择器" >
        <rayd-select options="Gender" v-model="gender"></rayd-select>
      </vxe-form-item>
      <vxe-form-item title="值">{{gender}}</vxe-form-item>

      <vxe-form-item title="单选下拉选择器（树型）">
        <rayd-select :options="natureTreeList" v-model="natureId" tree-config></rayd-select>
      </vxe-form-item>
      <vxe-form-item title="值">{{natureId}}</vxe-form-item>

      <vxe-form-item title="多选下拉选择器" >
        <rayd-select options="Gender" v-model="genders" multiple></rayd-select>
      </vxe-form-item>
      <vxe-form-item title="值">{{genders}}</vxe-form-item>

      <vxe-form-item title="多选下拉选择器（树型）" >
        <rayd-select :options="natureTreeList" v-model="natureIds" tree-config multiple></rayd-select>
      </vxe-form-item>
      <vxe-form-item title="值">{{natureIds}}</vxe-form-item>

      <vxe-form-item title="级联选择器（显示完整路径）">
        <el-cascader
          clearable
          filterable
          :props="{ expandTrigger: 'hover' }"
          :options="ssqTreeList"
          v-model="ssqIds"
          v-if="vif"
        ></el-cascader>
      </vxe-form-item>
      <vxe-form-item title="值">{{ssqIds}}</vxe-form-item>

      <vxe-form-item title="复选框">
        <el-checkbox v-model="checkbox" :true-label="1" :false-label="0"></el-checkbox>
      </vxe-form-item>
      <vxe-form-item title="值">{{checkbox}}</vxe-form-item>

      <vxe-form-item title="计数器">
        <el-input-number controls-position="right" :min="0" v-model="number"></el-input-number>
      </vxe-form-item>
      <vxe-form-item title="值">{{number}}</vxe-form-item>

      <vxe-form-item title="附件管理">
        <rayd-file :isRead="false" :removable="true" :multiple="true" :folderId="folderId" />
      </vxe-form-item>
      <vxe-form-item title="值">{{folderId}}</vxe-form-item>

      <vxe-form-item title="文本域">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4}"
          maxlength="50"
          show-word-limit
          placeholder="请输入"
          clearable
          v-model="textarea"
        ></el-input>
      </vxe-form-item>
      <vxe-form-item title="值">{{textarea}}</vxe-form-item>

      <vxe-form-item title="图片上传" span="24">
        <rayd-image-upload v-model="image" />
      </vxe-form-item>
    </vxe-form>
</template>

<script>
import { Ssq } from "@/api";

export default {
  data() {
    return {
      /* v-if组件重渲染 */
      vif: true,

      /* 文本框 */
      input: "",
      /* 下拉选择器 */
      gender: "",
      genders: [],
      genderList: this.util.getDataItemList("Gender"), //性别数据（数据字典）
      natureId: "",
      natureIds: [],
      natureTreeList: this.util.getDataItemList("ManaNature"), //组织性质树型数据（数据字典）
      /* 日期选择器（范围选择）*/
      datetimerange: [],
      /* 日期选择器（精确选择） */
      date: "",
      /* 级联选择器（显示完整路径） */
      ssqIds: [],
      ssqTreeList: [], //省市区树型数据
      /* 图片上传 */
      image: "",
      /* 复选框 */
      checkbox: "",
      /* 计数器 */
      number: 0,
      /* 附件管理 */
      folderId: "",
      /* 文本域 */
      textarea: "",
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      /* 初始化数据源 */
      Promise.all([
        //级联选择器 获取省市区树形数据
        Ssq.GetTreeList().then((res) => {
          this.ssqTreeList = res;
        }),
      ]).then(() => {
        //级联选择器（显示完整路径）的数据回显处理（emitPath）
        this.ssqIds = this.util.getTreeDeepArr("440513", this.ssqTreeList);
      });
    },
  },
};
</script>